/******************** 变量 ********************/
$lv-search-icon-color: $icon-color !default;
$lv-search-icon-color-hover: $primary-color !default;
$lv-search-icon-color-active: $primary-color !default;
$lv-search-icon-color-disabled: $icon-color-disabled !default;
$lv-search-input-bg-color: transparent;
$lv-search-input-hover-bg-color: transparent;

/******************** mixin ********************/

/******************** 组件 ********************/
.lv-search {
  display: inline-block;
  width: 100%;
  color: $text-color;
  font-size: $font-size-base;
  font-family: $font-family;
  line-height: $line-height-base;
  vertical-align: middle;

  .lv-input-group {
    display: flex;
    width: 100%;

    &.lv-input-group-disabled {
      cursor: not-allowed;

      > .lv-input-prefix {
        color: $lv-search-icon-color-disabled;
      }

      .lv-search-placeholder {
        z-index: 1;
        color: $text-color-disabled;
      }
    }
  }

  .lv-search-option {
    display: flex;
    align-items: center;

    .lv-icon-loading {
      @include icon-size;
    }
  }

  .lv-input {
    position: relative;
    vertical-align: top;
    background-color: $lv-search-input-bg-color;

    &:hover {
      background-color: $lv-search-input-hover-bg-color;
    }
  }

  .lv-search-icon{
    color: $lv-search-icon-color;
  }

  .lv-search-clear {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 0 0 $padding-xs;
    line-height: 1;
    border: none;
    cursor: pointer;

    > i {
      @include icon-size;

      color: $lv-search-icon-color;
    }

    &:hover {
      i {
        color: $lv-search-icon-color-hover;
      }
    }
  }

  .lv-search-placeholder {
    position: absolute;
    top: calc(50% - 0.16rem);
    left: 0;
    width: calc(100% - 0.36rem);
    height: $height-base;
    margin-left: $margin-md;
    padding-left: 0.12rem;
    overflow: hidden;
    color: $text-color-tertiary;
    line-height: 0.32rem;
    white-space: nowrap;
    word-wrap: keep-all;
    word-break: keep-all;
  }
}
